<template>
  <div class="home">
    <!--搜索框-->
    <div style="margin:200px auto 0;max-width: 600px;width:100%;">
      <div class="flex">
        <el-input class="flex-1 w400" v-model="query.keywords" placeholder="请输入" @keyup.enter.native="search"/>
        <el-button type="primary" class="ml-10" @click="search">搜索</el-button>
      </div>
      <div class="mt-10 doc-types flex">
        <div class="type"><i class="el-icon-picture-outline" />图片</div>
        <div class="type"><i class="el-icon-headset" />音频</div>
        <div class="type"><i class="el-icon-video-camera" />视频</div>
        <div class="type"><i class="el-icon-document" />文档</div>
        <div class="type"><i class="el-icon-ship" />商机</div>
        <div class="type"><i class="el-icon-setting" />教导模式</div>
        <div class="type"><i class="el-icon-school" />企业大学</div>
      </div>
    </div>
    <!--文件列表-->
    <div class="grid mt-20">
      <div v-for="(item,index) of files.data" :key="index" class="grid-item" :style="{width: gridWidth}">
        <div class="grid-item_container">
          <img  :src="item.path" alt="" />
          <p class="desc">{{item.title}}</p>
        </div>
      </div>
    </div>
    <!--回到顶部-->
    <el-backtop :bottom="100">
      <div class="backtop">
        <i class="el-icon-top" />
      </div>
    </el-backtop>
  </div>
</template>

<script>
import Masonry from 'masonry-layout'
import ApiFile from '@/api/ApiFile'

export default {
  name: 'home',
  components: {
  },
  data() {
    return {
      docTypes: [
        {name: '文档'}
      ],
      gridWidth: "20%",
      query: {
        keywords: ''
      },
      files: {
        data: []
      }
    }
  },
  created() {
    this.search()
    this.setGridWidth()
    window.onresize = this.setGridWidth
    setTimeout(() => {
      this.initGrid()
    },1000)
  },
  methods: {
    setGridWidth() {
      const width = window.innerWidth
      const columns =  Math.round(width / 250)
      const percent = (width / columns / width * 100).toFixed(4)
      this.gridWidth = percent + '%';
    },
    initGrid() {
      const elem = document.querySelector('.grid');
      const masonry = new Masonry( elem, {
        itemSelector: '.grid-item',
        // columnWidth: 250
      });
      console.log(masonry)
    },
    search() {
      ApiFile.search(this.query.keywords).then(res=>{
        console.log(res)
        this.files.data = res.data

        setTimeout(() => {
          if (this.files.data.length > 0) {
            this.initGrid()
          }

        },1000)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  .doc-types{
    .type {
      font-size: 15px;
      vertical-align: middle;
      margin-right:10px;
      padding: 2px;
      cursor: pointer;
    }
    i {
      font-size:15px;
      vertical-align: middle;
      margin-right:3px;
    }
  }
  /*瀑布流*/
  .grid-item {
    padding-bottom: 20px;
    .grid-item_container{
      width: 95%;
      margin:auto;
      box-sizing: border-box;
      border: 1px solid #ccc;
    }
    img{
      display: block;
      width: 100%;
    }
    .desc{
      font-size:12px;
      padding: 0 10px;
    }
  }
  /*返回顶部*/
  .backtop {
    height: 100%;
    width: 100%;
    background-color: #1989fa;
    box-shadow: 0 0 6px rgba(0,0,0, .12);
    text-align: center;
    line-height: 40px;
    color:#fff;
    border-radius: 100%;
  }
</style>
